{% extends "base.html" %}

{% block content %}
<div class="row">
    <!-- 数据总量模块 -->
    <div class="col-md-4">
        <div class="card dashboard-card">
            <div class="card-header">数据总量</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12 indicator mb-3">
                        <div>总存储量</div>
                        <div class="indicator-value">{{ data.storage.total }} TB</div>
                    </div>
                    <div class="col-6 indicator">
                        <div>日新增数据</div>
                        <div class="indicator-value text-primary">{{ data.storage.daily_increment }} GB</div>
                    </div>
                    <div class="col-6 indicator">
                        <div>已处理数据</div>
                        <div class="indicator-value text-success">{{ data.storage.processed }} TB</div>
                    </div>
                </div>
                <div id="dataFlowChart" style="height: 200px;"></div>
            </div>
        </div>
    </div>

    <!-- 地理分布模块 -->
    <div class="col-md-8">
        <div class="card dashboard-card">
            <div class="card-header">地理分布</div>
            <div class="card-body">
                <table class="table table-hover">
                    <thead class="table-light">
                        <tr>
                            <th>数据中心</th>
                            <th>服务商</th>
                            <th>位置</th>
                            <th>存储容量</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for loc in data.locations %}
                        <tr>
                            <td>{{ loc.name }}</td>
                            <td>{{ loc.provider }}</td>
                            <td>{{ loc.location }}</td>
                            <td>{{ loc.capacity }}</td>
                            <td>
                                <span class="badge bg-success">正常</span>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- 硬件状态模块 -->
<div class="row mt-4">
    <div class="col-md-12">
        <div class="card dashboard-card">
            <div class="card-header">硬件监控</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="indicator">
                            <div>CPU使用率</div>
                            <div class="indicator-value">{{ data.hardware.cpu }}%</div>
                            <div class="progress mt-2">
                                <div class="progress-bar bg-danger" 
                                     style="width: {{ data.hardware.cpu }}%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="indicator">
                            <div>GPU使用率</div>
                            <div class="indicator-value">{{ data.hardware.gpu }}%</div>
                            <div class="progress mt-2">
                                <div class="progress-bar bg-warning" 
                                     style="width: {{ data.hardware.gpu }}%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="indicator">
                            <div>内存使用率</div>
                            <div class="indicator-value">{{ data.hardware.memory }}%</div>
                            <div class="progress mt-2">
                                <div class="progress-bar bg-info" 
                                     style="width: {{ data.hardware.memory }}%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="indicator">
                            <div>磁盘使用率</div>
                            <div class="indicator-value">{{ data.hardware.disk }}%</div>
                            <div class="progress mt-2">
                                <div class="progress-bar bg-success" 
                                     style="width: {{ data.hardware.disk }}%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="hardwareRadar" style="height: 400px;" class="mt-4"></div>
            </div>
        </div>
    </div>
</div>

<!-- 数据库统计模块 -->
<div class="row mt-4">
    <div class="col-md-6">
        <div class="card dashboard-card">
            <div class="card-header">数据库统计</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-6">
                        <h5>MySQL</h5>
                        <div class="indicator">
                            <div>查询次数</div>
                            <div class="indicator-value">{{ data.database.mysql.queries }}</div>
                        </div>
                        <div class="indicator mt-2">
                            <div>成功率</div>
                            <div class="indicator-value text-success">
                                {{ data.database.mysql.success_rate }}%
                            </div>
                        </div>
                        <div class="indicator mt-2">
                            <div>平均耗时</div>
                            <div class="indicator-value">
                                {{ data.database.mysql.avg_time }}s
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <h5>HBase</h5>
                        <div class="indicator">
                            <div>查询次数</div>
                            <div class="indicator-value">{{ data.database.hbase.queries }}</div>
                        </div>
                        <div class="indicator mt-2">
                            <div>成功率</div>
                            <div class="indicator-value text-success">
                                {{ data.database.hbase.success_rate }}%
                            </div>
                        </div>
                        <div class="indicator mt-2">
                            <div>平均耗时</div>
                            <div class="indicator-value">
                                {{ data.database.hbase.avg_time }}s
                            </div>
                        </div>
                    </div>
                </div>
                <div id="dbChart" style="height: 300px;"></div>
            </div>
        </div>
    </div>

    <!-- 传感器信息模块 -->
    <div class="col-md-6">
        <div class="card dashboard-card">
            <div class="card-header">传感器详情</div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>设备ID</th>
                                <th>类型</th>
                                <th>尺寸</th>
                                <th>传输时长</th>
                                <th>处理时长</th>
                                <th>状态</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for sensor in data.sensors %}
                            <tr>
                                <td>{{ sensor.id }}</td>
                                <td>{{ sensor.type }}</td>
                                <td>{{ sensor.size }}</td>
                                <td>{{ sensor.latency }}ms</td>
                                <td>{{ sensor.process_time }}ms</td>
                                <td>
                                    {% if sensor.latency < 100 %}
                                    <span class="badge bg-success">优良</span>
                                    {% elif sensor.latency < 200 %}
                                    <span class="badge bg-warning">一般</span>
                                    {% else %}
                                    <span class="badge bg-danger">延迟</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// 数据流动折线图
const flowChart = echarts.init(document.getElementById('dataFlowChart'));
flowChart.setOption({
    xAxis: { type: 'category', data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'] },
    yAxis: { type: 'value' },
    series: [{
        type: 'line',
        smooth: true,
        data: [120, 200, 150, 80, 70, 110],
        areaStyle: { color: 'rgba(25, 183, 207, 0.2)' }
    }]
});

// 硬件状态雷达图
const radarChart = echarts.init(document.getElementById('hardwareRadar'));
radarChart.setOption({
    radar: {
        indicator: [
            { name: 'CPU', max: 100 },
            { name: 'GPU', max: 100 },
            { name: '内存', max: 100 },
            { name: '磁盘', max: 100 }
        ],
        shape: 'circle',
        radius: '60%'
    },
    series: [{
        type: 'radar',
        data: [{
            value: [
                {{ data.hardware.cpu }},
                {{ data.hardware.gpu }},
                {{ data.hardware.memory }},
                {{ data.hardware.disk }}
            ],
            name: '使用率',
            areaStyle: { color: 'rgba(255, 155, 68, 0.2)' }
        }]
    }]
});

// 数据库对比柱状图
const dbChart = echarts.init(document.getElementById('dbChart'));
dbChart.setOption({
    tooltip: { trigger: 'axis' },
    xAxis: {
        type: 'category',
        data: ['查询次数', '成功率', '平均耗时']
    },
    yAxis: { type: 'value' },
    series: [
        {
            name: 'MySQL',
            type: 'bar',
            data: [
                {{ data.database.mysql.queries }},
                {{ data.database.mysql.success_rate }},
                {{ data.database.mysql.avg_time }}
            ],
            itemStyle: { color: '#5470C6' }
        },
        {
            name: 'HBase',
            type: 'bar',
            data: [
                {{ data.database.hbase.queries }},
                {{ data.database.hbase.success_rate }},
                {{ data.database.hbase.avg_time }}
            ],
            itemStyle: { color: '#91CC75' }
        }
    ]
});

// 自动刷新硬件状态
setInterval(() => {
    fetch('/api/hardware_status')
        .then(response => response.json())
        .then(data => {
            radarChart.setOption({
                series: [{
                    data: [{
                        value: [data.cpu, data.gpu, data.memory, data.disk]
                    }]
                }]
            });
        });
}, 10000);
</script>
{% endblock %}